<template>
    <div>
        <van-nav-bar
        title="车票"
        left-text="返回"
        left-arrow
        @click-left="$router.back(-1)"
        />

        <div class="bg_div">
            <img src="https://p1-q.mafengwo.net/s12/M00/73/F8/wKgED1uVyeaABZqoAAGHzYHr4BQ93.jpeg?imageMogr2%2Fthumbnail%2F750x%2Fquality%2F100"/>
        </div>

        

        <van-popup v-model="start_show" position="bottom" :style="{ height: '45%' }" >

            <van-area title="出发地区" @cancel="start_show=false" @confirm="start_confirm" :area-list="area" />

        </van-popup>

        <van-popup v-model="end_show" position="bottom" :style="{ height: '45%' }" >

            <van-area title="到达地区" @cancel="end_show=false" @confirm="end_confirm" :area-list="area" />

        </van-popup>

        <div class="city_box">

            <div class="city_div" @click="start_show=true">

                <div class="city_title">出发地区</div>

                <div class="city_name"><span v-if="start_area">{{ start_area[1]['name'] }}</span><span v-else>请选择</span></div>

            </div>

            <div class="cen_div" @click="flip">
                <div class="btn-switch"></div>
            </div>

            <div class="city_div"  @click="end_show=true" style="align-items:flex-end">

                <div class="city_title">到达地区</div>

                <div class="city_name"><span v-if="end_area">{{ end_area[1]['name'] }}</span><span v-else>请选择</span></div>

            </div>
            

        </div>

        <div class="city_box">

            <div class="city_div" @click="date_show=true" style="width:680rem">

                <div class="city_title">去程日期</div>

                <div class="city_name"><span v-if="my_date">{{ my_date.getMonth()+1 }}月{{ my_date.getDate() }}日</span><span v-else>请选择</span></div>

            </div>

        </div>

        <van-calendar v-model="date_show" @select="onSelect" @confirm="onConfirm"/>

        <div class="butt_div" style="display:flex;justify-content:center;margin-top:20rem;">
            <div style="width:630rem">
                <van-button color="#FF9D00" @click="search" block>搜索</van-button>
            </div>
        </div>
        

    </div>
</template>

<script>

import area from '../../js/area.js'

export default {
    data(){

        return {
            area: area,
            start_area: null,
            end_area: null,
            start_show: false,
            end_show: false,
            date_show: false,
            my_date: null
        }

    },
    methods:{
        start_confirm(res){
            this.start_show = false
            this.start_area=res
        },
        end_confirm(res){
            this.end_show = false
            this.end_area=res
        },
        flip(){
            
            let new_area=this.start_area

            this.start_area = this.end_area

            this.end_area = new_area

        },
        onSelect(res){

            this.my_date = new Date(res)

        },
        onConfirm(res){
            this.my_date = new Date(res)

            this.date_show = false
        },
        search(){

            if(this.start_area && this.end_area && this.my_date){
                let m = this.my_date.getMonth()+1

                let date = this.my_date.getFullYear()+'-'+m+"-"+this.my_date.getDate()
                
                this.$router.push({path:'/ticket_search',query:{departCity:this.start_area[1]['name'],destination:this.end_area[1].name,departDate:date }})

            }
        }
    }
}
</script>

<style scoped>
    .bg_div,.bg_div img{
        width:750rem;
        height: 460rem;
    }
    div.city_box{
        width:750rem;
        height: 160rem;
        display: flex;
        justify-content: center;
    }
    div.city_box div.cen_div{
        width:100rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    div.city_box div.cen_div div.btn-switch{
        width:60rem;
        height: 60rem;
        background: url('../../assets/sprites.png');
        background-size: 190rem auto;
    }
    div.city_box div.city_div{
        width:290rem;
        height: 160rem;
        border-bottom: 1px solid #E5E5E5;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    div.city_box div.city_div div{
        margin:10rem;
    }
    div.city_box div.city_div div.city_title{
        color:#999;
        font-size: 25rem;
    }
    div.city_box div.city_div div.city_name{
        color:#111;
        font-size: 40rem;
    }
</style>